<template>
	<view class="paylist">
		<!-- 头部 -->
		<view class="homelife_head">
			<view v-for="(item,index) in headlist" :key="index" class="container_headbox" @click="Onhead(item)">
				<text :class="code == item.code?'head_titlea':'head_titleb'">{{item.title}}</text>
				<view v-if="code == item.code"></view>
			</view>
		</view>
		<!-- 内容 -->
		<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="124" :initData="initData" @dataRefresh='dataRefresh'
			v-if="LoadIf">
			<text></text>
			<view class="register_list" v-for="(item,index) in list" :key="index">
				<!-- 挂号 -->
				<view v-if="code=='hang'" class="hang_bos">
					<view class="hang_head">
						<image v-if="!item.status_is" src="../../static/my/gh_b.png"></image>
						<image v-else src="../../static/my/gh_a.png"></image>
						<view class="hang_head_box">
							<view class="font-323232 font15 font-b">{{item.typename}}</view>
							<view class="font-9c9c9d font15">{{item.createtime}}</view>
						</view>
					</view>
					<view class="font-9c9c9d font13 marginb10">就诊人:{{item.user_the_patient_info.name}}</view>
					<view class="font-9c9c9d font13 marginb10">{{item.room_name}}</view>
					<view class="font-9c9c9d font13 marginb10">{{item.doctor_name}}/{{item.academic_title_name}}</view>
					<view class="hang_time" @click="Onjump(item)">
						<view class="font-6ccbb6 font13">
							就诊时间:{{item.time}}<text>{{item.begin_time}}~{{item.end_time}}</text></view>
						<view class="font-9c9c9d font13">{{item.pay_status==2&&item.status=='normal'?'去缴费':'详情'}}
							<image src="../../static/my/morea.png"></image>
						</view>
					</view>
				</view>
				<!-- 图文 -->
				<view v-if="code=='imgtext' || code=='video'" class="hang_bos">
					<view class="hang_head">
						<image v-if="!item.status_is" src="../../static/my/gh_b.png"></image>
						<image v-else src="../../static/my/gh_a.png"></image>
						<view class="hang_head_box">
							<view class="font-323232 font15 font-b">{{item.typename}}</view>
							<view class="font-9c9c9d font15">{{item.createtime}}</view>
						</view>
					</view>
					<view class="font-9c9c9d font13 marginb10">就诊人:{{item.user_the_patient_info.name}}</view>
					<view class="font-9c9c9d font13 marginb10">{{item.doctor_name}}/{{item.academic_title_name}}</view>
					<view class="ellipsis font13 font-969696 marginb10">问题描述: {{item.content?item.content:'暂无'}}</view>
					<view class="hang_time">
						<view class="font-6ccbb6 font13">订单金额:￥{{item.money}}</view>
						<view @click="Onjump(item)" v-if="item.status=='normal'&&item.pay_status==2" class="font-9c9c9d font13">去缴费
							<image src="../../static/my/morea.png"></image>
						</view>
					</view>
				</view>
			</view>
		</LoadMore>
	</view>
</template>

<script>
	import LoadMore from "@/components/loadMore.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				LoadIf: false, //先不加载
				list: [], //数据
				//传参数据
				initData: {
					url: 'listHangNumberOrder', //接口
					//data里得传参
					param: {},
				},
				code: 'hang',
				//头部列表
				headlist: [{
						num: 0,
						title: '挂号',
						id: 1,
						code: 'hang',
						url: 'listHangNumberOrder'
					},
					// {
					// 	num: 0,
					// 	title: '门诊',
					// 	id: 2,
					// 	code: 'mz'
					// },
					// {
					// 	num: 0,
					// 	title: '住院押金',
					// 	id: 3,
					// 	code: 'yj'
					// },
					{
						num: 0,
						title: '图文问诊',
						id: 4,
						code: 'imgtext',
						url: 'listConsultationOrder'
					},
					{
						num: 0,
						title: '视频问诊',
						id: 4,
						code: 'video',
						url: 'listConsultationVideoOrder'
					}
				],
			}
		},
		onLoad: function(options) {
			if (options.code) {
				this.headlist.forEach(item => {
					if (item.code == options.code) {
						this.initData.url = item.url
						this.code = item.code
						this.list = []
						this.LoadIf = true
					}
				})
			} else {
				this.LoadIf = true
			}
		},
		methods: {
			//返回数据
			dataRefresh(e) {
				e.forEach(item => {
					item.createtime = this.$base.formatTime(new Date(item.createtime *
						1000), "yyyy/MM/dd hh:mm:ss")
					if (item.pay_status == 2) {
						if (item.status == 'normal') {
							item.typename = '待支付'
						}
						if (item.status == 'cancel') {
							item.typename = '已取消'
						}
						item.status_is = false
					}
					if (item.pay_status == 1) {
						if (item.status == 'refund') {
							item.typename = '已退款'
							item.status_is = false
						} else {
							item.typename = '已支付'
							item.status_is = true
						}
					}
				})
				// }
				this.list = e
			},
			//切换
			Onhead(res) {
				console.log(res.url, '查看')
				this.initData.url = res.url
				this.code = res.code
				this.list = []
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			//跳页面
			Onjump(e) {
				//挂号
				if (this.code == 'hang') {
					if (e.pay_status == 2) {
						uni.navigateTo({
							url: '/pagesA/register/conpay?id=' + e.order_code,
						})
					} else {
						uni.navigateTo({
							url: '/pagesA/register/payinfo?id=' + e.order_code,
						})
					}
				}
				//图文问诊
				if (this.code == 'imgtext') {
					uni.navigateTo({
						url: '/pagesA/ask/payment?id=' + e.order_code + '&type=tw',
					})
				}
				//视频问诊
				if (this.code == 'video') {
					uni.navigateTo({
						url: '/pagesA/ask/payment?id=' + e.order_code + '&type=sp',
					})
				}
			},
		}
	}
</script>

<style>
	.paylist {
		background-color: #f9f9f9;
		height: 100%;
	}

	/* 头部 */
	.homelife_head {
		height: 124rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.container_headbox {
		height: 50rpx;
	}

	.head_titlea {
		font-size: 30rpx;
		font-weight: 700;
		color: #323232;
	}

	.head_titleb {
		font-size: 30rpx;
		color: #969696;
	}

	.container_headbox view {
		height: 5rpx;
		background-color: #6bcbb6;
		border-radius: 3px;
		margin-top: 12rpx;
	}

	/* 内容 */
	/* 挂号 */
	.hang_bos {
		width: 750rpx;
		padding: 25rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
	}

	.hang_head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hang_head image {
		width: 40rpx;
		height: 40rpx;
	}

	.hang_head_box {
		width: 620rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hang_time {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 14rpx;
	}

	.hang_time text {
		margin-left: 10rpx;
	}

	.hang_time image {
		height: 20rpx;
		width: 12rpx;
		margin-left: 10rpx;
	}

	.marginb10 {
		margin-top: 14rpx;
	}
</style>
